import React, { useImperativeHandle, useRef } from 'react'

// 需求: Test组件里面的input可以被使用者操作从而获取焦点,但是不能直接把input的DOM暴露出去
// 思路: 不把input的dom对象添加给appRef的current. 取而代之的是一个函数,这个函数定义在Test组件内.然后函数暴露给appRef.current. 所以函数里面写了什么则使用Test组件的人就只能干什么
export default React.forwardRef(function (props, appRef) {
  const testRef = useRef() // 是Test组件内自己的ref
  // useImperativeHandle的作用: 就是把第一个参数的ref对象的current上面添加自定义的内容
  useImperativeHandle(appRef, () => {
    return {
      xxx() {
        // 让当前组件内的input获取焦点
        testRef.current.focus()
      },
    }
  })
  return (
    <div>
      <input type="text" ref={testRef} />
    </div>
  )
})
